<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>龙湖社区管理系统列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <!--引入本地的css样式-->
  <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../static/css/admin.css" media="all">
</head>
<body>

  <div class="layui-fluid">   
    <div class="layui-card">
      <!--搜索框-->
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
          <div class="layui-form-item">
            <div class="layui-input-inline">
              <label class="layui-form-label">关键字:</label>
              <div class="layui-input-block">
                  <input type="text" name="describes" id="describes"  placeholder="" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn layuiadmin-btn-admin" id="btn_search" lay-submit lay-filter="LAY-user-back-search">
                  <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
            </div>
          </div>

      </div>


      <div class="layui-card-body">
        <!--头部工具栏 id="toolbarDemo" lay-event="事件名"-->
        <script type="text/html" id="toolbarDemo">
          <div class="layui-btn-container">
            <!-- lay-event 给元素绑定事件名 -->
            <button class="layui-btn layuiadmin-btn-admin" lay-event="add_param">
              添加
            </button>
            <button class="layui-btn layuiadmin-btn-admin" lay-event="batchdel">
             删除
            </button>
          </div>
        </script>

        <!--数据表格-->
        <table class="layui-hide" id="LAY-user-back-manage" lay-filter="LAY-user-back-manage"></table>

<!--        <script type="text/html" id="employeeSexTpl">-->
<!--          {{#  if(d.employee_sex == 1){ }}-->
<!--          <span>男</span>-->
<!--          {{#  } else if(d.employee_sex == 2){ }}-->
<!--          <span>女</span>-->
<!--          {{#  } }}-->
<!--        </script>-->
        <!-- laytpl模板引擎 数据库状态字段
        1转换成正常显示到页面；2转换成冻结显示到页面 3转换成删除显示到页面 -->
        <script type="text/html" id="statusTpl">
          {{#  if(d.status == 1){ }}
          <span>正常</span>
          {{#  } else if(d.status == 2){ }}
          <button type="button" class="layui-btn-xs layui-btn-disabled">删除</button>
          {{#  } }}
        </script>
        <script type="text/html" id="barDemo">
          <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        </script>
      </div>
    </div>
  </div>

<script src="../../static/js/jquery-3.6.0.min.js"></script>
<!--引入本地layui.js-->
<script src="../../static/layui/layui.js"></script>
<!--js-->
<script type="text/javascript">
    layui.config({
        base: '../../static/layui/layuiadmin/' //静态资源所在路径js
    }).extend({
        index: 'lib/index' //主入口模块
    }).use('index');
</script>

  <script type="text/javascript">
        layui.use(['table','form'],function (){
            var table = layui.table;
            var form = layui.form;
            //表格方法渲染：把数据查询显示在数据表格中
            table.render({
              elem: '#LAY-user-back-manage'
              ,url:'/query/basic'
              ,title: '角色信息表'
              ,toolbar:'#toolbarDemo'
              ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', fixed: 'left', unresize: true, sort: true}
                ,{field:'describes', title:'参数描述'}
                ,{field:'keywords', title:'参数关键字'}
                ,{field:'parameter', title:'参数值'}
                ,{field:'manager', title:'操作人'}
                ,{title:'操作',fixed:'right',toolbar:'#barDemo',width:150}
              ]]
              ,page: true
              ,limits:[5,10,15,20]
            })

            //按条件搜索,绑定单击事件
            $("#btn_search").click(function (){
              //获取输入框的户主名
              var describes = $("#describes").val();
              //房产编号
              //表格重载
              table.reload('LAY-user-back-manage', {
                url:'/search/basic',
                page: {
                  curr: 1 //重新从第 1 页开始
                }
                ,where: {
                  describes:describes,
                }
              });
            })

            //监听行工具事件/侧边工具栏
            table.on('tool(LAY-user-back-manage)',function (obj){
                var data = obj.data;//选中的当前行数据
                if(obj.event === 'edit'){//编辑功能
                      layer.open({
                        type:2,//iframe层
                        title:'编辑基础信息',
                        content:'edit.html',//展示编辑页面
                        area:['450px','550px'],
                        maxmin:true,
                        btn:['确定','取消'],
                        yes:function (index, layero){
                          //应该把edit.html页面表单的数据提交给服务器
                          //在当前页面-list.html获取iframe层-edit.html的DOM-form表单
                          var body = layer.getChildFrame('body', index);
                          //获取edit.html页面中所有表单的数据
                          var submitData = body.find("#myform").serialize();//serialize()只能序列化表单中文本
                          //发起Ajax请求
                          $.ajax({
                            url:"/edit/basic",
                            type:"post",
                            data:submitData,
                            dataType: "json",
                            success:function (res){
                                if(res.code==200){
                                  layer.msg(res.msg,{
                                    offset:'15px',
                                    icon:1,
                                    time:1000
                                  },function (){
                                    //刷新
                                    window.location.reload();
                                  })
                                }
                              if(res.code==500){
                                layer.msg(res.msg,{
                                  offset:'15px',
                                  icon:1,
                                  time:1000
                                },function (){
                                  //刷新
                                  window.location.reload();
                                })
                              }
                              layer.close(index);//关闭弹层
                            }
                          })
                        },
                        success: function(layero, index){//子页面edit.html页面数据回显
                          var body = layer.getChildFrame('body', index);
                          var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                          //input控件的输入框/隐藏框
                          body.find("input[name=id]").val(data.id);
                          body.find("input[name=describes").val(data.describes);
                          body.find("input[name=keywords").val(data.keywords);
                          body.find("input[name=parameter").val(data.parameter);

                          iframeWin.layui.form.render();
                        }
                      })
                }
            })

            //监听头部工具栏
            table.on('toolbar(LAY-user-back-manage)',function (obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event){
                  case 'batchdel':
                    var data = checkStatus.data;
                    if(data.length<1){
                      layer.msg('您还未选中删除的数据')
                    }else{
                      //删除：提示确认框，发起Ajax请求
                      layer.confirm('确定要删除选中行数据吗?',function (index){
                          var ids = new Array();
                          $.each(data,function (index,item){
                            //循环遍历选中的数据，只要数据的id，把id塞入到数组中
                            ids.push(item.id);
                          })
                         //发起Ajax请求
                          $.ajax({
                              url:"/del/basic",
                              type:"post",
                              data:{ids:ids},
                              traditional: true,//数组进行传统的序列化操作
                              dataType:"json",
                              success:function (res){
                                  layer.msg(res.msg,{
                                    offset:'15px',
                                    icon:1,
                                    time:1500
                                  },function (){
                                    //刷新
                                    window.location.reload();
                                  })
                              }
                          })
                      })
                    }
                    break;
                  case 'add_param':
                    layer.open({
                      type:2,//iframe层
                      title:'添加基础信息',
                      content:'add.html',//展示编辑页面
                      area:['450px','550px'],
                      maxmin:true,
                      btn:['确定','取消'],
                      yes:function (index, layero){
                        //应该把edit.html页面表单的数据提交给服务器
                        //在当前页面-list.html获取iframe层-edit.html的DOM-form表单
                        var body = layer.getChildFrame('body', index);
                        //获取edit.html页面中所有表单的数据
                        var submitData = body.find("#myform").serialize();//serialize()只能序列化表单中文本
                        //发起Ajax请求
                        $.ajax({
                          url:"/add/basic",
                          type:"post",
                          data:submitData,
                          dataType: "json",
                          success:function (res){
                            if(res.code==200){
                              layer.msg(res.msg,{
                                offset:'15px',
                                icon:1,
                                time:1000
                              },function (){
                                //刷新
                                window.location.reload();
                              })
                            }
                            if(res.code==500){
                              layer.msg(res.msg,{
                                offset:'15px',
                                icon:1,
                                time:1000
                              },function (){
                                //刷新
                                window.location.reload();
                              })
                            }
                            layer.close(index);//关闭弹层
                          }
                        })
                      }
                    })
                    break;
                }
            })
        })
  </script>

</body>
</html>

